<template>
  <div class="back">
    <div class="a">
      <h3>Register</h3>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <div class=" text">
          <el-form-item prop="userName">
            <span>用户名：</span><input type="text" id="userName" v-model="ruleForm.userName">
          </el-form-item>
        </div>
        <div class=" text">
          <el-form-item prop="phone">
            <span>手机号：</span>
            <input type="text" id="phone" v-model="ruleForm.phone">
          </el-form-item>
        </div>
        <div class="text">
          <el-form-item prop="password">
            <span>密码：</span><input type="password" id="password" v-model="ruleForm.password">
          </el-form-item>
        </div>
        <div class="text">
          <el-form-item prop="password2">
            <span>确认密码：</span><input type="password" id="password2" v-model="ruleForm.password2">
          </el-form-item>
        </div>
        <div class="text2">
          <span>验证码：</span>
          <el-form-item prop="mes">
            <input type="text" class="v" v-model="ruleForm.mes">
          </el-form-item>
          <span id="txt">{{ verify }}</span>
          <a @click="Num">换一个</a>
        </div>
      </el-form>
      <div class="buttom">
        <button class="but" @click="sumb('ruleFormRef')">确定注册</button>
        <button @click="this.$router.push({ path: '/login' })">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import "../../styles/back.css"
export default {
  data() {
    var validateCheckPass = ( rule, value, callback ) => {
      if ( value !== this.ruleForm.password ) {
        callback( new Error( "两次密码不一致" ) )
      } else {
        callback()
      }
    }

    var validateCheckMes = ( rule, value, callback ) => {
      if ( value !== this.verify ) {
        callback( new Error( "请输入正确的验证码" ) )
      } else {
        callback()
      }
    }
    return {
      verify: '',
      tip: false,
      ruleForm: [
        {
          userName: '',
          phone: '',
          password: '',
          password2: '',
          mes: '',
        }
      ],
      rules: {
        userName: [
          { required: true, message: '请输入用户信息', trigger: 'blur' },
          { min: 4, max: 8, message: "长度为4-8位", trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "密码只能含有数字+字母",
            trigger: "blur"
          },
          { min: 6, max: 12, message: "长度为6-12位", trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validateCheckPass, trigger: 'blur' }
        ],
        mes: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { validator: validateCheckMes, trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    this.Num()
  },
  methods: {
    Num() {
      var num = '';
      for ( var i = 0; i < 5; i++ ) {
        num += Math.floor( Math.random() * 10 );  //范围是[0~9]
      }
      this.verify = num

    },

    sumb( fromName ) {
      this.$refs[ fromName ].validate( valid => {
        if ( valid ) {
          //如果通过验证 to do...
          axios( {
            url: 'http://127.0.0.1:8081/api/register',
            method: 'post',
            params: {
              userName: document.getElementById( 'userName' ).value,
              password: document.getElementById( 'password' ).value,
              phone: document.getElementById( 'phone' ).value,
            }
          } ).then( res => {
            if ( res.data.code === 20000 ) {
              this.$message.success( res.data.message );
              this.$router.push( { path: '/login' } );
            }
            else {
              this.$message.error( res.data.message );
            }
          } )
        }
      } )


    }

  }

}
</script>

<style scoped >
.a {
  opacity: 0.8;
  position: absolute;
  top: 110px;
  left: 600px;
  border-radius: 10px;
  height: 500px;
}

input {
  position: absolute;
  left: 140px;
}

.text2 .el-form-item {
  margin-top: -15px;
}

.v {
  width: 70px;
}


.text2 #txt {
  position: absolute;
  right: 80px;
  bottom: 105px;
  font-size: 23px;
  letter-spacing: 2px;
  color: #ff0062;
}

span {
  position: relative;
  right: -42px;
}

.text2 {
  margin-top: 30px;
}

.text2 a {
  position: absolute;
  right: 25px;

  font-size: 14px;
}

.text2 a:hover {
  color: #39e7db;
  text-decoration: underline;
}

.but {
  margin-top: 40px;
}

.buttom button:last-of-type {
  font-size: 15px;
  position: absolute;
  right: 50px;
  bottom: 45px;
}

.buttom button:last-of-type:hover {
  text-decoration: underline;
  color: #ff0066;
}
</style>

<style lang="less" scoped>
/deep/.el-form-item__error {
  padding-top: 0;
  left: 140px
}

.text2 /deep/.el-form-item__error {
  padding-top: 15px;
  left: 140px
}
</style>
